<template>
  <div class="home">
    <div>
      <el-table
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        @selection-change="handleCurrentChange"
      >
        <el-table-column
          prop="agency"
          label="经销商"
          sortable
          width="180">
        </el-table-column>

        <el-table-column
          prop="invoice_no"
          label="发票号"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="total"
          label="应收"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="yifu"
          label="已收"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="company"
          label="收款公司"
          sortable
          width="180">
        </el-table-column>


        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <!--            <el-popconfirm-->
            <!--              title="确定删除该条出库记录吗？对应库存会回滚"-->
            <!--              @onConfirm="del(scope.row.id)"-->
            <!--            >-->
            <!--              <el-button slot="reference" size="mini" >删除</el-button>-->
            <!--            </el-popconfirm>-->
            <el-button @click="drawer = true;form.invoice_no=scope.row.invoice_no" slot="reference" size="mini" >收款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    <div style="text-align: center;margin-top: 30px;">-->
    <!--      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
    <!--                     :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"-->
    <!--                     :total="this.list.length">-->
    <!--      </el-pagination>-->
    <!--    </div>-->
    <el-dialog
      title="收款"
      :visible.sync="drawer"
      :with-header="false"
      size="50%">

      <span>{{form.invoice_no}}收款金额</span>
      <span><el-input style="width: 30%;margin-left: 10%" v-model="form.total"></el-input></span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="success"  round  style="margin-left: 16px;"  @click="onSubmit">提交</el-button>
  </span>



    </el-dialog>

  </div>

</template>

<script>
import {check_outbound_details, outbound_record, suboutbound} from '../../api/outbound'
import { del_outbound } from '../../api/outbound'
import { agency_peihuo } from '../../api/outbound'
import { check_peihuo_product } from '../../api/outbound'
import { submit_peihuo_product } from '../../api/outbound'
import {zhuangbei_detail} from "../../../../../wufang/frontend/src/api/cal";
import { check_payment,submit_payment } from '@/api/other'

export default {
  name: 'check_payment',
  data(){
    return{
      drawer:false,
      user:true,
      list:[],
      pagesize:10,
      currentPage:1,

      form: {
        total:0,
        invoice_no:'',
      }
    }
  },
  mounted() {
    this.check_payment_list()
  },
  methods:{
    onSubmit() {
      // console.log(this.form)
      submit_payment(this.form)
        .then(location. reload())
    },


    check_payment_list(){
      this.list = []
      check_payment().then(res =>{
          // console.log(res["list"])
          this.list = res["data"]
        },
      )
    },
    peihuo(data){
      const req = {data:data}
      agency_peihuo(req)
        .then(res =>{
            // console.log(res["list"])
            this.peihuo_form = res["data"]
          },
        )
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    del(data){
      del_outbound(data).then(res =>{
          // console.log(res["list"])
          this.list = res["list"]
        },
      )
    },

  }

}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
